<template>
  <div class="external">
    <div class="titles flex">
      <div>外部成员及职责:</div>
      <div class="btn flex">
        <div @click="searchChange('重置')">重置</div>
        <div @click="searchChange('查询')">查询</div>
      </div>
    </div>
    <div class="condition">
      <div class="flex">
        <div>应急组织/单位</div>
        <el-input placeholder="请输入应急组织/单位" v-model="List.OrgDept" />
      </div>
    </div>
    <div class="Line"></div>
    <div class="Btn flex">
      <div></div>
      <div class="BtnList flex">
        <div @click="operate('新增')">
          <i class="el-icon-plus"></i>新增
        </div>
        <div @click="operate('删除')">
          <i class="el-icon-minus"></i>删除
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" height="400px" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column v-for="item in tableList" :key="item.prop" :prop="item.prop" :label="item.label"
          :width="item.width" align="center" />
        <el-table-column label="操作" width="60" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="titles flex">
      <div>应急组织架构:</div>
    </div>
    <div class="Line" style="margin-top: 16px;"></div>
    <div class="organization"></div>
    <externalDialog ref="dialog" :title="title" :List="dialogList" @addEventListener="addEventListener" />
  </div>
</template>
<script>
import externalDialog from "./externalDialog.vue";
import axios from "axios";
export default {
  name: 'external',
  components: {
    externalDialog
  },
  data() {
    return {
      List: {
        OrgDept: "",
      },
      typeList: [],
      tableList: [
        { prop: '应急组织/单位', label: '应急组织/单位', width: '200' },
        { prop: '电话', label: '联系电话', width: '' },
        { prop: '备注', label: '备注', width: '' },
      ],
      tableData: [],
      multipleSelection: [],
      title: "",
      dialogList: {},
      oldData: {}
    }
  },
  methods: {
    async getTable(obj) {
      const options = {
        method: 'POST',
        url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrywb_bb_zsgc',
        data: {
          TIP: 'select',
          SQL: `select OrgDept '应急组织/单位', Contact 电话 , Note 备注 from imp_emergmanage.emerg_rescue_mbrs_out where OrgDept LIKE CONCAT('%', '${obj.OrgDept}', '%') `
        }
      };
      axios.request(options).then(response => {
        this.tableData = response.data.data
      }).catch(function (error) {
        console.error(error);
      });
    },
    operate(val) {
      if (val === '新增') {
        this.$refs.dialog.dialogVisible = true;
        this.title = '新增'
        this.dialogList = {
          应急组织: "",
          电话: "",
          备注: "",
        };
      } else if (val === '删除') {
        const list = this.multipleSelection.map(item => {
          return `('${item.应急组织}', '${item.电话}', '${item.备注}')`;
        }).join(',');
        if (this.multipleSelection.length === 0) {
          this.$message({
            message: '请选择要删除的数据',
            type: 'warning'
          });
          return
        } else {
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          }).then(() => {
            const options = {
              method: 'POST',
              url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrywb_bb_zsgc',
              data: {
                TIP: 'delete',
                SQL: `delete from imp_emergmanage.emerg_rescue_mbrs_out WHERE (orgDept, contact, note) IN (${list})`
              }
            };

            axios.request(options).then(response => {
              if (response.data.message === "success") this.$message.success("删除成功");
              this.getTable(this.List)
            }).catch(function (error) {
              console.error(error);
            });
          })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelection = this.multipleSelection.map(item => {
        const newItem = {};
        Object.keys(item).forEach(key => {
          const newKey = key.replace("应急组织/单位", "应急组织"); // 替换特定字符串
          newItem[newKey] = item[key];
        });
        return newItem;
      });
    },
    handleClick(row) {
      this.$refs.dialog.dialogVisible = true;
      this.title = '编辑'
      let newObj = {
        备注: row.备注,
        应急组织: row["应急组织/单位"], // 使用旧键名取值
        电话: row.电话
      };
      this.dialogList = JSON.parse(JSON.stringify(newObj));
      this.oldData = JSON.parse(JSON.stringify(newObj));
    },
    searchChange(val) {
      if (val === '重置') {
        this.List = {
          OrgDept: "",
        }
        this.getTable(this.List)
      } else if (val === '查询') {
        this.getTable(this.List)
      }
    },
    addEventListener(obj, title) {
      if (title === '编辑') {
        const options = {
          method: 'POST',
          url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrywb_bb_zsgc',
          data: {
            TIP: 'UPDATE',
            SQL: `UPDATE imp_emergmanage.emerg_rescue_mbrs_out
                SET
                OrgDept = '${obj.应急组织}', Contact = '${obj.电话}',  Note = '${obj.备注}'
                WHERE
                OrgDept = '${this.oldData.应急组织}' and Contact = '${this.oldData.电话}' and Note = '${this.oldData.备注}'`
          }
        };
        axios.request(options).then(response => {
          console.log(response.data);
          if (response.data.message === "success") this.$message.success("编辑成功");
          this.getTable(this.List)
        }).catch(function (error) {
          console.error(error);
        });
      } else if (title === '新增') {
        const options = {
          method: 'POST',
          url: 'http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/jyrywb_bb_zsgc',
          data: {
            TIP: 'INSERT',
            SQL: `INSERT INTO imp_emergmanage.emerg_rescue_mbrs_out ( OrgDept, Contact, Note) VALUES ('${obj.应急组织}', '${obj.电话}','${obj.备注}')`
          }
        };
        axios.request(options).then(response => {
          if (response.data.message === "success") this.$message.success("添加成功");
          else this.$message.error("添加失败");
          this.getTable(this.List)
        }).catch(function (error) {
          console.error(error);
        });
      }

    }
  },
  mounted() {
    this.getTable(this.List)
  }
}
</script>
<style lang="scss" scoped>
.external {
  width: (673 / 1720) * 100%;
  // width: 673px;
  height: 971px;
  padding-top: 21px;

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .titles {
    margin: 0 auto;
    width: (609 / 673) * 100%;
    height: 32px;
    color: #163154;
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;

    .btn {
      width: 155px;

      div {
        width: 73px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        font-weight: 350;
        border-radius: 4px;

        &:hover {
          cursor: pointer;
        }

        &:nth-child(1) {
          border: 1px solid #165DFF;
          color: rgba(22, 93, 255, 0.70);
        }

        &:nth-child(2) {
          background: #165DFF;
          color: #FFF;
          font-weight: 700;
        }
      }
    }
  }

  .condition {
    margin: 24px auto;
    width: (609 / 673) * 100%;
    height: 64px;
    border-radius: 1.792px;
    background: rgba(22, 93, 255, 0.05);
    padding: 16px 24px;

    &>div {
      width: (430 / 609) * 100%;
      height: 32px;
      line-height: 32px;

      &>div {
        color: #6A788D;
        font-size: 14px;
        font-weight: 400;

        /* 157.143% */
        &:nth-child(1) {
          width: (110 / 420) * 100%;
          text-align: left;
        }
      }
    }

    ::v-deep .el-input {
      width: 300px !important;
    }

    ::v-deep .el-input--medium .el-input__inner {
      height: 32px !important;
      line-height: 32px !important;
    }
  }

  .Line {
    margin: 0 auto;
    width: (609 / 673) * 100%;
    height: 1px;
    background-color: #165DFF;
  }

  .Btn {
    width: (609 / 673) * 100%;
    margin: 24px auto 0;

    .BtnList {
      width: 142px;
      height: 24px;

      &>div {
        width: 68px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 4px;

        &:hover {
          cursor: pointer;
        }

        i {
          margin-right: 5px;
        }

        &:nth-child(1) {
          background: #165DFF;
          color: #FFF;
          font-size: 14px;
          font-weight: 700;
        }

        &:nth-child(2) {
          border: 1px solid #165DFF;
          color: rgba(22, 93, 255, 0.70);
          font-size: 14px;
          font-weight: 350;
        }
      }
    }
  }


  .table {
    margin: 12px auto 21px;
    width: (609 / 673) * 100%;
    height: 400px;

    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: rgba(22, 93, 255, 0.05) !important;
      color: #6A788D;
      font-size: 14px;
      font-weight: 500;
    }

    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
      background: rgba(22, 93, 255, 0.10) !important;
    }
  }

  .organization {
    margin-top: 24px;
    width: 100%;
    height: 255px;
    background: url('~@/assets/images/救援物资/应急组织架构.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>